<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
  </head>

  <body>
  <div>
    
    <div ng-include="headerInclude"></div>   
    <div ng-controller="Apiman.ImportApisController" id="form-page" class="container apiman-import-apis-wizard apiman-wizard page" ng-cloak="" ng-show="pageState == 'loaded'">
      <div class="row">
        <div class="col-md-12">
          <ol class="breadcrumb" data-field="breadcrumb">
            <li><a id="bc-home" href="{{ pluginName }}/"><i class="fa fa-home fa-fw"></i><span apiman-i18n-key="home">Home</span></a></li>
            <li><a id="bc-apis" href="{{ pluginName }}/orgs/{{ org.id }}/apis"><i class="fa fa-shield fa-fw"></i><span>{{ org.name }}</span></a></li>
            <li class="active"><span apiman-i18n-key="import-apis_">Import API(s)</span></li>
          </ol>
        </div>
      </div>
      <div class="row">
        <!-- Wizard Items (left hand side) -->
        <div class="col-md-3 apiman-wizard-items">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 apiman-header ng-binding" apiman-i18n-key="import-apis_">Import API(s)</div>
            </div>
            <div class="row">
              <hr>
            </div>
            <div class="row">
              <div class="apiman-wizard-item" ng-class="{done: currentPageIdx > 0, active: currentPageIdx == 0}">
                <div class="step">
                  <i class="fa fa-fw" ng-class="{'fa-check-circle-o': currentPageIdx > 0, 'fa-circle-o': currentPageIdx == 0}"></i>
                  <span apiman-i18n-key="step-1" class="apiman-label-faded">Step 1</span>
                </div>
                <div class="step-title">
                  <span apiman-i18n-key="overview">Overview</span>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="apiman-wizard-item" ng-class="{done: currentPageIdx > 1, active: currentPageIdx == 1}">
                <div class="step">
                  <i class="fa fa-fw" ng-class="{'fa-check-circle-o': currentPageIdx > 1, 'fa-circle-o': currentPageIdx <= 1}"></i>
                  <span apiman-i18n-key="step-2" class="apiman-label-faded">Step 2</span>
                </div>
                <div class="step-title">
                  <span apiman-i18n-key="find-apis">Find APIs</span>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="apiman-wizard-item" ng-class="{done: currentPageIdx > 2, active: currentPageIdx == 2}">
                <div class="step">
                  <i class="fa fa-fw" ng-class="{'fa-check-circle-o': currentPageIdx > 2, 'fa-circle-o': currentPageIdx <= 2}"></i>
                  <span apiman-i18n-key="step-3" class="apiman-label-faded">Step 3</span>
                </div>
                <div class="step-title">
                  <span apiman-i18n-key="choose-plans">Choose Plans</span>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="apiman-wizard-item" ng-class="{done: currentPageIdx > 3, active: currentPageIdx == 3}">
                <div class="step">
                  <i class="fa fa-fw" ng-class="{'fa-check-circle-o': currentPageIdx > 3, 'fa-circle-o': currentPageIdx <= 3}"></i>
                  <span apiman-i18n-key="step-4" class="apiman-label-faded">Step 4</span>
                </div>
                <div class="step-title">
                  <span apiman-i18n-key="import-apis">Import APIs</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="col-md-9 apiman-wizard-pages">
          <!-- Overview Page -->
          <div class="apiman-wizard-page" ng-show="currentPage == 'overview'">
            <div class="col-md-12">
              <p apiman-i18n-key="import-apis.overview.overview">
                Welcome to the Import API(s) wizard.  Use this wizard to import APIs from external
                sources.  This is typically much faster than entering all of the API details by hand.
                Depending on the configuration of apiman (and the source or sources used when searching for
                APIs to import), more or less information may be included for each API during the 
                import process.
              </p>

              <h3 apiman-i18n-key="find-apis">Find APIs</h3>
              <p apiman-i18n-key="import-apis.overview.find-apis">
                The first step in the wizard is to search for and find the APIs you wish to 
                import.  The location of this data is dependent on how apiman is configured, but
                in most cases you will be searching against some sort of registry of real, deployed
                APIs.
              </p>

              <h3 apiman-i18n-key="choose-plans">Choose Plans</h3>
              <p apiman-i18n-key="import-apis.overview.choose-plans">
                Once you have searched for and located the API or APIs you wish to import, the
                next step is to choose whether these APIs should be "public" or should be offered
                through one or more of the Plans defined by the Organization.
              </p>

              <h3 apiman-i18n-key="import-apis">Import APIs</h3>
              <p apiman-i18n-key="import-apis.overview.import-apis">
                Finally, you will be shown a list of the choices you made so that you can confirm that
                you really do want to import the APIs.  Once you click "Import" on this last step,
                each of the APIs you chose will be added to the Organization.  Success or failure
                of each API import will be shown as it happens.
              </p>
            </div>
          </div>

          <!-- Find APIs Page -->
          <div class="apiman-wizard-page" ng-show="currentPage == 'find-apis'">
            <div class="col-md-12">
              <h1 apiman-i18n-key="find-apis">Find APIs</h1>
              <div>
                <form class="form-horizontal" style="margin-top: 10px">
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="textInput-markup" apiman-i18n-key="import-from_">Import From:</label>
                    <div class="col-sm-10">
                      <select id="import-from" ng-model="importFrom" apiman-select-picker="" class="selectpicker" data-live-search="false">
                        <option value="{{ importSource.id }}" ng-disabled="importSource.disabled" ng-repeat="importSource in importSources | orderBy : 'name.toLowerCase()'" data-content="<i class='fa fa-inline fa-fw fa-{{ importSource.icon }}'></i> <span>{{ importSource.name }}</span>">{{ importSource.name }}</option>
                      </select>
                    </div>
                  </div>
                </form>
              </div>
              <div ng-show="importFrom == 'api-catalog'">
                <div class="apiman-wizard-search-box">
                  <form ng-submit="searchApiCatalog(searchText)">
                    <input ng-disabled="searchDisabled" apiman-i18n-key="search-api-name" ng-model="searchText" type="text" class="apiman-form-control form-control input-search" placeholder="Search by API name..."></input>
                    <button type="submit" apiman-action-btn="" class="btn btn-default btn-search" data-field="searchButton" apiman-i18n-key="search" data-icon="fa-cog" placeholder="Searching">Search</button>
                  </form>
                </div>
                <div class="apiman-wizard-search-results">
                  <div class="alert alert-info" ng-show="apis.length == 0">
                    <span class="pficon pficon-info"></span>
                    <span apiman-i18n-key="import-apis.no-matching-apis-found">No matching APIs found - use the search box above to search for APIs by name.</span>
                  </div>
                  <div class="apiman-wizard-table-wrapper" ng-show="apis.length > 0">
                    <table class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th apiman-i18n-key="api">API</th>
                          <th apiman-i18n-key="description">Description</th>
                          <th apiman-i18n-key="actions">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr ng-repeat="api in apis | orderBy:'name'">
                          <td>{{ api.name }}</td>
                          <td>{{ api.description }}</td>
                          <td><a ng-hide="isApiSelected(api)" href="#" ng-click="addApi(api)" apiman-i18n-key="add">Add</a></td>
                        </tr>
                      </tbody>
					</table>
                  </div>
                </div>
              </div>
              <h1 apiman-i18n-key="selected-apis" style="margin-top: 40px">Selected APIs</h1>
              <div ng-show="importInfo.apis.length == 0">
                <div class="alert alert-info">
                  <span class="pficon pficon-info"></span>
                  <span apiman-i18n-key="import-apis.no-apis-selected">No APIs have been selected, please search for APIs above and then select at least one for import.</span>
                </div>
              </div>
              <div ng-show="importInfo.apis.length > 0">
                <div class="apiman-wizard-table-wrapper">
                  <table class="table table-striped table-bordered">
                    <thead>
                      <tr>
                        <th apiman-i18n-key="api">API</th>
                        <th apiman-i18n-key="description">Description</th>
                        <th apiman-i18n-key="actions">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr ng-repeat="api in importInfo.apis | orderBy:'name'">
                        <td>{{ api.name }}</td>
                        <td>{{ api.description }}</td>
                        <td><a href="#" ng-click="removeApi(api)" apiman-i18n-key="remove">Remove</a></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

          <!-- Choose Plans Page -->
          <div class="apiman-wizard-page" ng-show="currentPage == 'choose-plans'">
            <div class="col-md-12">
              <h1 apiman-i18n-key="choose-plans">Choose Plans</h1>
              <h3 apiman-i18n-key="import-apis.public-apis">Public API(s)</h3>
              <div>
                <span class="apiman-label-faded" apiman-i18n-key="import-apis.public-api-help">Select this option if you wish the imported APIs to be accessible directly, without using API Contracts.  Typically (but not always) this option is used instead of selecting Plan(s).</span>
              </div>
              <div style="padding: 8px; margin-bottom: 10px">
                <input ng-model="importInfo.isPublic" type="checkbox" id="public-apis"></input>
                <label for="public-apis" apiman-i18n-key="import-apis.make-apis-public" style="padding-left: 3px">Make imported API(s) public</label>
              </div>
              <h3 apiman-i18n-key="available-plans">Available Plans</h3>
              <div>
                <span apiman-i18n-key="available-plans-help">Choose which plans should be presented when Client Apps create a link (Contract) to this API. Note that only plans in a 'Locked' state show up in this list.</span>
              </div>
              <div class="apiman-divider-40" ng-show="plans.length == 0">
                <div class="alert alert-warning">
                  <span class="pficon pficon-info"></span>
                  <span apiman-i18n-key="import-apis.no-locked-plans-found">No locked plans were found in the Organization.  Please create and lock at least one plan before attempting to configure them here.  Or simply make your APIs "public" using the checkbox above!</span>
                </div>
              </div>
              <!-- The plans to choose from -->
              <div class="apiman-plan-selector apiman-divider-40">
                <div class="container-fluid apiman-summaryrow" ng-repeat="plan in plans">
                  <div class="row">
                    <input ng-model="plan.checked" data-field="checkbox" type="checkbox"></input>
                    <span class="title">{{ plan.name }}</span>
                    <select apiman-select-picker="" ng-model="plan.selectedVersion" ng-options="version for version in plan.lockedVersions" class="selectpicker pull-right">
                    </select>
                  </div>
                  <hr>
                </div>
              </div>
            </div>
          </div>

          <!-- Import APIs Page -->
          <div class="apiman-wizard-page" ng-show="currentPage == 'import-apis'">
            <div class="col-md-12">
              <h1 apiman-i18n-key="confirm-import">Confirm Import</h1>
              <div>
                <p apiman-i18n-key="confirm-import.explanation">Please verify that the APIs listed below really are the ones you would like to import.  Once you are satisfied, click Import!</p>
              </div>
              <h2 apiman-i18n-key="apis-to-import">APIs To Import</h2>
              <div class="apiman-wizard-table-wrapper apiman-import-wizard-apis">
                <table class="table table-striped table-bordered">
                  <thead>
                    <tr>
                      <th></th>
                      <th apiman-i18n-key="api">API</th>
                      <th apiman-i18n-key="description">Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="api in importInfo.apis | orderBy:'name'" ng-class="{'complete': api.status == 'imported', 'pending': !api.status, 'active': api.status == 'importing', 'error': api.status == 'error'}">
                      <td width="1%"><i class="fa fa-fw" ng-class="{'fa-check-circle-o': api.status == 'imported', 'fa-circle-o': !api.status, 'fa-dot-circle-o': api.status == 'importing', 'fa-warning': api.status == 'error'}"></i></td>
                      <td>{{ api.name }}</td>
                      <td>{{ api.description }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- The Wizard Buttons -->
          <div class="pull-right apiman-wizard-buttons">
            <hr />
            <button ng-disabled="disableBackButton || currentPage == 'overview'" id="back" class="btn btn-default" ng-click="prevPage()"><span class="i fa fa-angle-left"></span><span apiman-i18n-key="back">Back</span></button>
            <button ng-disabled="currentPage == 'import-apis' || !currentPageValid" id="next" class="btn btn-default" ng-click="nextPage()"><span apiman-i18n-key="next">Next</span><span class="i fa fa-angle-right"></span></button>
            <button ng-hide="hideImportButton" ng-disabled="currentPage != 'import-apis' || !currentPageValid" id="import" class="btn btn-primary" apiman-action-btn="" data-field="importButton" apiman-i18n-key="import" ng-click="doImport()" data-icon="fa-cog" placeholder="Importing">Import</button>
            <a ng-show="showFinishButton" id="finish" href="{{ pluginName }}/orgs/{{ params.org }}/apis" class="btn btn-primary" apiman-i18n-key="Finish">Finish</a>
            <a ng-disabled="disableCancelButton" id="cancel" href="javascript:window.history.back()" class="btn btn-default btn-cancel" apiman-i18n-key="cancel">Cancel</a>
          </div>

        </div>
      </div>
    </div> <!-- /container -->
  </div>
  </body>
</html>
